<template>
   <div class="mouser-header-sub"
        :class="{'active-height':indexSubscript === index}"
   >
      <div class="sub-body-content">
         <ul ref="sub">
            <li v-for="item in 7" :key="item">
               {{item}}
            </li>
         </ul>
      </div>
   </div>
</template>

<script>
   // import {lists} from '../../assets/util/util'
   export default {
      name: 'mouserHeaderSub',
      props: {
         indexSubscript: {
            type: [String, Number],
            default: ''
         },
         index: {
            type: null,
            default: ''
         }
      },
      methods: {
         elemt(style) {
            console.log(1111)
            this.element = this.$refs.sub.children
            Array.from(this.element).forEach((item, index) => {
               item.style.cssText = `
                  transition:all 700ms ease-in 600ms;
                  transition-delay:${index * 200}ms;
                  margin-left:30px;
                  opacity: 1;
               `
            })
         },
         styleElement() {
            Array.from(this.element).forEach((item, index) => {
               item.style.cssText = ''
            })
         }
      }
   }
</script>

<style scoped lang="stylus">
   @import '../../assets/stylus/common.styl'
   .mouser-header-sub
      background #fff
      position absolute
      z-index 99
      top 82px
      left 0
      width 100%
      overflow hidden
      height 0px
      transition all 560ms cubic-bezier(0.15, 1.18, 0.69, 1.00)

   .active-height
      height 155px

   .sub-body-content
      widthContent()

   ul
      widthContent()
      align-items center
      display flex
      position relative
      li
         background blue
         margin-left 50px
         width 100px
         height 100px
         opacity 0
   .active-transition
      opacity 1
</style>
